<template>
	<view class="container">

		<uni-section title="新增商品" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="form" :modelValue="baseFormData" :rules="rules">
					<uni-forms-item name="name" label="名称" required>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入商品名称" />
					</uni-forms-item>
					<uni-forms-item name="describe" label="简介" required>
						<uni-easyinput v-model="baseFormData.describe" placeholder="请输入商品简介" />
					</uni-forms-item>
					<uni-forms-item name="price" label="价格" required>
						<uni-number-box v-model="baseFormData.price" ></uni-number-box>
					</uni-forms-item>
					<uni-forms-item name="image" label="图像" required>
						<uni-file-picker @select="mentouSelect" limit="1" title="最多选择1张图片" file-mediatype="image"  returnType="object"></uni-file-picker>
					</uni-forms-item>
					
					
				</uni-forms>
				<button type="primary" @click="submit()">提交</button>
			</view>
		</uni-section>
		<view class="nav">
			<view class="item" @click="skipToKitchen()">
				<image src="../../../../static/点单.png" class="pic"></image>
				<span class="word">厨房</span>
			</view>
			<view class="item" @click="skipToTotalItems()">
				<image src="../../../../static/点单.png" class="pic"></image>
				<span class="word">仓库</span>
			</view>
			<view class="item" @click="skipToAddItem()">
				<image src="../../../../static/首页.png" class="pic" style="margin-left: 18rpx;"></image>
				<span class="word">新增</span>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import nav1 from "../../navv/nav1.js"
	export default {
		data() {
			return {
				baseFormData:{
					name:"",
					describe:"",
					price:0,
					image:{}
				},
				rules:{
					name: {
						rules:[
							{
								required: true,
								errorMessage: '请填写商品名',
							},
						],
					},
					describe: {
						rules:[
							{
								required: true,
								errorMessage: '请填写商品描述',
							},
							
						],
						
					},
					price: {
						rules:[
							{
								required: true,
								errorMessage: '请选择价格',
							},
							
						],
					},
					image: {
						rules:[
							{
								required: true,
								errorMessage: '请选择商品图片',
							},
						],
						
					},
				}
			
			}
		},
		methods: {
			...nav1,
			mentouSelect(e){
				console.log(e)
				this.baseFormData.image=e.tempFiles[0]
			},
			submit(){
				let t=this;
				t.$refs.form.validate().then(res=>{
					uni.showModal({
						title: '提示',
						content: '确定新增该商品吗？',
						success: function (res) {
							if (res.confirm) {
								uni.request({
									url:"http://localhost:3000/addItem",
									method:"POST",
									dataType:"json",
									data:t.baseFormData,
									success(data) {
										uni.reLaunch({
											url:"/pages/index/kitchen/totalItems/totalItems"
										})
									}
								})
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
							
						}
					});
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
				console.log(t.baseFormData.image)
				//console.log(Buffer.from(JSON.stringify(this.baseFormData.image)))
				
				
			}
		}
	}
</script>

<style>
.nav{
		display: flex;
		position: fixed;
		position: fixed;
		top:92%;
		background-color: white;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		border-top: 2rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #d0d0d0;
		z-index: 99;
	}
	.pic{
		width: 60rpx;
		height: 80rpx;
	}
</style>




